<template>
  <div class="home">
     <swiper :options="swiperOption">
      <swiper-slide>
        <img class="w-100" src="../assets/images/210794580bb9303653804bb7b482f2a4.jpeg" alt>
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/210794580bb9303653804bb7b482f2a4.jpeg" alt>
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/210794580bb9303653804bb7b482f2a4.jpeg" alt>
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-1" 
      slot="pagination">
      </div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-dark-1"><!-- 外层-->
      <div class="d-flex flex-wrap"><!-- 内上层，flex-wrap的效果是换行-->
        <div class="nav-item mb-3">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-story"></i>
          <div class="py-2">故事站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-shopmall"></i>
          <div class="py-2">周边商城</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-experience"></i>
          <div class="py-2">体验服</div>
        </div>
                <div class="nav-item mb-3">
          <i class="sprite sprite-newbie"></i>
          <div class="py-2">新人专区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-glory"></i>
          <div class="py-2">荣耀·传承</div>
        </div>
                <div class="nav-item mb-3">
          <i class="sprite sprite-community"></i>
          <div class="py-2">阿人社区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-wangzhe"></i>
          <div class="py-2">王者营地</div>
        </div>
                <div class="nav-item mb-3">
          <i class="sprite sprite-gongzhonghao"></i>
          <div class="py-2">公众号</div>
        </div>     
      </div>
      <div class="bg-light py-2 fs-sm">
        <i class="sprite sprite-arrow mr-1"></i>
        <span>收起</span>
      </div>
    </div>
    <!-- end of nav icons -->
    <m-list-card icon="caidan1" title="新闻资讯" :categories="newsCats"><!-- 1.传值(icon,title,categories(要绑定))（到ListCard组件） -->
      <!-- 8.以下是添加到具名插槽的内容,用template包裹 -->
      <!-- 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称 -->
      <template v-slot:items="{category}">
        <!-- 遍历category.NewList（一个数组[]里面有5个对象） -->
        <router-link tag="div" :to="`/articles/${news._id}`" class="py-2 fs-lg d-flex" v-for="(news,i) in category.newsList" v-bind:key='i'>  <!-- to后面是动态参数，news指的是单个新闻(v-for="(news,i) in category.newsList",遍历newsList得到news)，用模板字符串表示${news._id}-->
          <span class="text-info">[{{ news.categoryName }}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{ news.title }}</span>
          <span class="text-grey-1 fs-sm">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    <!--<div class="py-2" v-for="n in 5" :key="n">
          <span>[新闻]</span>
          <span>|</span>
          <span>夏日新版本“稷下星之队”即将6月上线</span>
          <span>06/02</span>
        </div> -->
    </m-list-card>
    <m-list-card icon="yingxiong" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem;"> <!--换行 ，margin:"0 -0.5rem"为了抵消下面div的p-2x形成的内容挤压，腾出左右的空间 p-2=0.5rem-->
          <router-link tag="div" v-bind:to="`/heroes/${hero._id}`" class="p-2 text-center"
          style="width: 20%;" 
          v-for="(hero, i) in category.heroList" :key="i">  <!-- p-2为上下左右各1rem，一行5个-->
            <img :src="hero.avatar" class="w-100">  <!--图片宽度百分百-->
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <m-card icon="caidan1" title="新闻资讯"></m-card>

  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  filters: {    //过滤器
    date(val){  //val=2019-11-19T13:43:22.504Z,格式化出month-day =>  11-19
      return dayjs(val).format('MM/DD')
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".pagination-home"
        }
      },
      newsCats: [],
      heroCats: []
    };
  },
  methods:{
    async fetchNewsCats() {
      const res = await this.$http.get("news/list")
      this.newsCats = res.data
    },
    async fetchHeroCats() {
      const res = await this.$http.get("heroes/list");
      this.heroCats = res.data;
    }
  },
  created(){
    this.fetchNewsCats();
    this.fetchHeroCats();
  }

};
</script>
 
<style lang="scss">
@import '../assets/scss/_variables.scss';

.pagination-home {
   .swiper-pagination-bullet {
      opacity: 1;  //不透明
      border-radius: 0.1538rem;  //2.468px
      background: map-get($colors, 'white');//获取变量$color：(white)
      &.swiper-pagination-bullet-active {
        background: map-get($colors, 'info');//获取变量$color：(info)
      }
   }
 }

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {   //9个.nav-item加右边框，并且各25%的空间
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n) {   //4n为4的倍数，即第四个图标不设置右边距（避免与边框的右边距重叠）
      border-right: none;
    }
  }
} 
</style>
